<template>
  <div class="module-container">
    <div class="module-text">
      <ul class="module-ul">
        <li>模板类型：</li>
        <li v-for="item in type" :key="item.id" :value="item.id" :class="{'mold': item.id === cut}" @click="moduleTypeEvent(item)">
          {{ item.name }}
        </li>
      </ul>
      <ul class="module-ul">
        <li>排序顺序:</li>
        <li v-for="item in sortOrder" :key="item.id" :class="{'mold': item.id === heat}" @click="sortOrderEvent(item)">
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="module-content">
      <ul>
        <li v-for="item in moduleList" :key="item.id">
          <img :src="item.url" alt="">
          <div>{{ item.moduleName }}</div>
          <div>共{{ item.moduleNumber }}个模板</div>
          <el-button class="button" @click="details">详情</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Module',
  data() {
    return {
      cut: 1,
      heat: '',
      type: [
        { name: '全部', id: 1 },
        { name: '药品', id: 2 },
        { name: '疾病', id: 3 },
        { name: '病例', id: 4 },
        { name: '其他', id: 5 }
      ], // 模板类型
      sortOrder: [
        { name: '热度', id: 1 },
        { name: '上线时间', id: 2 }
      ], // 排序顺序
      moduleList: [
        { id: 1, url: require('../../assets/img/logo.jpg'), moduleName: '药房网', moduleNumber: 2 },
        { id: 2, url: require('../../assets/img/logo.png'), moduleName: '疾病网', moduleNumber: 6 },
        { id: 3, url: require('../../assets/img/omny.png'), moduleName: '术语网', moduleNumber: 4 },
        { id: 4, url: require('../../assets/img/policy.png'), moduleName: '政策网', moduleNumber: 3 }
      ]
    }
  },
  methods: {
    details() {
      console.log('11111')
    },
    moduleTypeEvent(param) { // 模板类型点击
      console.log(param)
      this.cut = param.id
    },
    sortOrderEvent(param) { // 排序顺序点击
      this.heat = param.id
    }
  }
}
</script>

<style lang="scss">
  .module-content button{
    margin: 10px;
    padding: 6px 30px;
    background: #409EFF;
    color: #fff;
  }
</style>
<style lang="scss" scoped>
.module-ul{
  margin: 0px;
  padding: 0px;
  font-size: 13px;
  height: 40px;
  list-style: none;
  .mold{
    background: #409EFF;
    color: #fff;
    border: 1px solid #409EFF;
  }
  li{
    width: 100px;
    text-align: center;
    padding: 5px;
    list-style: none;
    float: left;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  li:not(:first-child){
    border-left: 0px solid #ccc;
  }
}
.module-content{
  ul{
    padding: 0px;
    list-style: none;
    li{
      font-size: 12px;
      text-align: center;
      border: 1px solid #ccc;
      width: 150px;
      float: left;
      img{
        margin: 5px;
        border: 4px solid #CCCCCC;
        height: 50px;
        width: 100px;
      }
    }
    li:nth-child(2n){
      margin: 0px 10px;
    }
  }
}
</style>
